<template>
  <div class="article-manager">
    <pages-header
      ref="pageHeader"
      :title="$route.params.id ? '任务详情' : '任务详情'"
      :backUrl="$routeProStr + '/task/list'"
      style="margin-bottom: 10px"
    ></pages-header>

    <el-card :bordered="false" shadow="never" class="mt16">
      <div class="form">
        <div class="goodsTitle acea-row">
          <div class="title">活动信息</div>
        </div>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple col"><b>任务名称:</b> {{ task.name }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple col"><b>任务类型：</b>{{ task.service_type }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple col"><b>任务科目：</b>{{ task.service_subject }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple col"><b>相关人：</b>{{ task.relevant_person }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple col"><b>报案人：</b>{{ task.alarm_person }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple col"><b>报案人联系方式：</b>{{ task.alarm_mobile }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple col"><b>任务对象：</b>{{ task.service_person }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple col"><b>任务对象联系方式：</b>{{ task.service_mobile }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple col"><b>首次接触事务时间：</b>{{ task.first_service_time }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple col"><b>救援范围：</b>{{ task.rescue_scope }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple col">
              <b>省市区：</b>{{ task.province }} / {{ task.city }} / {{ task.area }}
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple col"><b>详细地址：</b>{{ task.address }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple col"><b>出队时间：</b>{{ task.departures_time }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple col"><b>报名截至时间：</b>{{ task.deadline }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple col"><b>其他工具：</b>{{ task.other_tools }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple col"><b>事件进展：</b>{{ task.event_progress }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple col"><b>任务总结：</b>{{ task.summarize }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple col"><b>总结人：</b>{{ task.summarize_people }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple col"><b>任务描述：</b>{{ task.describe }}</div>
          </el-col>
        </el-row>
        <div class="goodsTitle acea-row">
          <div class="title">装备信息</div>
        </div>
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item, index) in task.equipment" :key="index + 'equipment'">
            <div class="grid-content bg-purple equipment-col">
              <img :src="item.image" style="margin-right: 10px" />
              <div>
                <div><b>装备名称：</b> {{ item.name }}</div>
                <div><b>装备数量：</b> {{ item.number }}</div>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="goodsTitle acea-row">
          <div class="title">车辆信息</div>
        </div>
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item, index) in task.car_list" :key="index + 'car'">
            <div class="grid-content bg-purple car-col">
              <img :src="item.image" style="margin-right: 10px" />
              <div>
                <div><b>车牌号：</b> {{ item.license_number }}</div>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="goodsTitle acea-row">
          <div class="title">队员信息</div>
        </div>
        <el-table
          :border="false"
          class="vxeTable"
          highlight-hover-row
          highlight-current-row
          header-row-class-name="false"
          :data="userList"
        >
          <el-table-column label="姓名" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.real_name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="蓝天编号" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.numbering }}</span>
            </template>
          </el-table-column>
          <el-table-column label="蓝天代号" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.codename }}</span>
            </template>
          </el-table-column>
          <el-table-column label="出发时间" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.set_off_time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="签到时间" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.sign_time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="返回时间" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.return_time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="到达时间" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.arrive_time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="任务耗时" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.timing }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getTaskInfo } from '@/api/task';
import task from '../../router/modules/task';

export default {
  name: 'teaDetail',
  data() {
    return {
      task: [],
      userList: [],
    };
  },
  components: {},
  computed: {},
  mounted() {
    if (this.$route.params.id) {
      this.getData();
    }
  },
  methods: {
    // 数据
    getData() {
      getTaskInfo({ task_id: this.$route.params.id })
        .then(async (res) => {
          this.task = res.data;
          this.userList = res.data.user_list;
          console.log(this.userList);
        })
        .catch((res) => {
          this.$message.error(res.msg);
        });
    },
  },
};
</script>

<style scoped lang="scss">
.col {
  min-height: 30px;
  line-height: 30px;
  word-wrap: break-word;
}

.equipment-col {
  display: flex;
  align-items: center;
  height: 80px;

  img {
    width: audo;
    height: 70px;
  }
}

.car-col {
  height: 140px;

  img {
    width: auto;
    height: 70px;
  }
}

.content_width {
  width: 414px;
}

::v-deep .ivu-form-item-content {
  line-height: unset !important;
}

.picBox {
  display: flex;
  cursor: pointer;
}

.pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 15px;
  display: inline-block;
  position: relative;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }

  .btndel {
    position: absolute;
    z-index: 1;
    width: 20px !important;
    height: 20px !important;
    left: 46px;
    top: -4px;
    color: #000;
  }
}

.form .goodsTitle {
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  margin-bottom: 25px;
}

.form .goodsTitle ~ .goodsTitle {
  margin-top: 20px;
}

.form .goodsTitle .title {
  border-bottom: 2px solid var(--prev-color-primary);
  padding: 0 8px 12px 5px;
  color: #000;
  font-size: 14px;
}

.form .goodsTitle .icons {
  font-size: 15px;
  margin-right: 8px;
  color: #999;
}

.form .add {
  font-size: 12px;
  color: var(--prev-color-primary);
  padding: 0 12px;
  cursor: pointer;
}

.form .radio {
  margin-right: 20px;
}

.form .submission {
  width: 10%;
  margin-left: 27px;
}

.form .upLoad {
  width: 58px;
  height: 58px;
  line-height: 58px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.02);
}

.form .iconfont {
  color: #898989;
}

.form .pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 10px;
}

.form .pictrue img {
  width: 100%;
  height: 100%;
}

.Modals .address {
  width: 90%;
}

.Modals .address .iconfont {
  font-size: 20px;
}
.tip {
  margin-top: 10px;
  color: #bbb;
  font-size: 12px;
}
</style>
